<template>
  <div class="mdh">页面效果</div>
  <div class="view">
    <oHeader :headerOptions="headerOptions" />
  </div>
  <div class="mdh">顶部按钮区详细</div>
  <CodeView :code="code" />
</template>
<script setup lang="tsx">
import { oHeader } from 'oneui'
import { AddUserDialog } from '~/popup/user'
const code = `
import { oHeader } from 'oneui'
const headerOptions = computed(() => {
  return {
    title: '用户列表',
    columns: [
      // 常规按钮，带点击事件
      {
        comtype: 'button',
        label: '添加用户',
        onClick() {
          AddUserDialog()
        }
      },
      // 常规按钮，带权限
      {
        comtype: 'button',
        label: '清空记录',
        perm:'operate.user.add',
        type: 'danger'
      },
      // 自定义 vnode
      {
        comtype: 'vnode',
        render() {
          return <div>可任意渲染JSX组件</div>
        }
      },
      // 搜索区可以渲染任意组件
      {
        prop: 'organizations_url',
        comtype: 'link',
        value: '跳转百度',
        onClick() {
          alert(1)
        }
      },
      // 搜索区可以渲染任意组件
      {
        prop: 'gender',
        comtype: 'checkbox',
        options: [
          { label: '男', value: 1 },
          { label: '女', value: 2 }
        ],
        value: '女'
      }
    ]
  }
})
`
const formData = reactive({})
provide('formData', formData)
const eventData = reactive({})
provide('eventData', eventData)
const headerOptions = computed(() => {
  return {
    title: '用户列表',
    columns: [
      // 常规按钮，带点击事件
      {
        comtype: 'button',
        label: '添加用户',
        onClick() {
          AddUserDialog()
        }
      },
      // 常规按钮，带权限
      {
        comtype: 'button',
        label: '清空记录',
        perm: 'operate.user.add',
        type: 'danger'
      },
      // 自定义 vnode
      {
        comtype: 'vnode',
        render() {
          return <div>可任意渲染组件</div>
        }
      },
      // 搜索区可以渲染任意组件
      {
        prop: 'organizations_url',
        comtype: 'link',
        value: '跳转百度',
        onClick() {
          alert(1)
        }
      },
      // 搜索区可以渲染任意组件
      {
        prop: 'gender',
        comtype: 'checkbox',
        options: [
          { label: '男', value: 1 },
          { label: '女', value: 2 }
        ],
        value: '女'
      }
    ]
  }
})
</script>
